<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>县长页面</title>
    <link rel="stylesheet" href="<s:url value="/assets/zonghe/static/css/bootstrap.css"></s:url>">
    <link rel="stylesheet" href="<s:url value="/assets/zonghe/static/css/Reset.css"></s:url>">
    <link href="<s:url value="/assets/zonghe/static/css/index_style.css"></s:url>" rel="stylesheet" type="text/css">
</head>

<body>
<div class="header">
    <!-- 背景动画 -->
    <canvas id="canvas"></canvas>
    <table></table>
    <div class="content">
        <div class=" middle-wrapper">
            <div class="middle-content">
                <!-- 左上 -->
                <div class="upper-left">
                    <div class="row no-margin">
                        <div class="col-xs-12">
                            <p>

                                <img src="<s:url value="/assets/zonghe/static/img/icon-1.png"></s:url>" alt="">
                            </p>
                            <p>成果跟踪</p>
                            <p>Results tracking</p>
                        </div>
                    </div>
                </div>
                <!-- 左下 -->
                <div class="lower-left">
                    <div class="row no-margin">
                        <div class="col-xs-12">
                            <p>
                                <img src="<s:url value="/assets/zonghe/static/img/icon-3.png"></s:url>" alt="">
                            </p>
                            <p>态势分析</p>
                            <p>Situation analysis</p>
                        </div>
                    </div>
                </div>
                <!-- 右上 -->
                <div class="upper-right">
                    <div class="row no-margin">
                        <div class="col-xs-12">
                            <p>
                                <img src="<s:url value="/assets/zonghe/static/img/icon-2.png"></s:url>" alt="">
                            </p>
                            <p>预警分析</p>
                            <p>Warning analysis</p>
                        </div>
                    </div>
                </div>
                <!-- 右下 -->
                <div class="lower-right">
                    <div class="row no-margin">
                        <div class="col-xs-12">
                            <p>
                                <img src="<s:url value="/assets/zonghe/static/img/icon-4.png"></s:url>" alt="">
                            </p>
                            <p>数据监控</p>
                            <p>Data monitoring</p>
                        </div>
                    </div>
                </div>
                <!-- 中间圆环 -->
                <div class="ring">
                    <div class="middle-font" style="border: 1px solid rgba(0,0,0,0);z-index: 1000">
                        <p>督查指挥作战</p>
                        <p>平台入口</p>
                    </div>
                </div>
                <!-- 球体动画 -->
                <div class="wrapper">
                    <div class="x">
                        <div class="x1"></div>
                        <div class="x2"></div>
                        <div class="xInner"></div>
                        <div class="y"></div>
                        <div class="y1"></div>
                        <div class="y2"></div>
                        <div class="yInner"></div>
                        <div class="z"></div>
                        <div class="z1"></div>
                        <div class="z2"></div>
                        <div class="zInner"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>


<script src="<s:url value="/assets/zonghe/static/js/jquery-1.10.2.js"></s:url> "></script>
<script src="<s:url value="/assets/zonghe/static/js/bootstrap.min.js"></s:url> "></script>
<script src="<s:url value="/assets/zonghe/static/js/index.js"></s:url> "></script>
<script>

    $(".upper-left").on('mouseenter',function () {
       // console.log('mouse enter')
        $(this).css({"left":"25px", "top": "65px"});
    })
    $(".upper-left").on('mouseleave',function () {
        //console.log('mouse leave')
        $(this).css({"left":"15px", "top": "65px"});
    })
    $(".upper-right").on('mouseenter',function () {
        $(this).css({"right":"25px", "top": "65px"});
    })
    $(".upper-right").on('mouseleave',function () {
        $(this).css({"right":"15px", "top": "65px"});
    })
    $(".lower-left").on('mouseenter',function () {
        $(this).css({"left":"25px", "bottom": "112px"});
    })
    $(".lower-left").on('mouseleave',function () {
        $(this).css({"left":"15px", "bottom": "112px"});
    })
    $(".lower-right").on('mouseenter',function () {
        $(this).css({"right":"25px", "bottom": "112px"});
    })
    $(".lower-right").on('mouseleave',function () {
        $(this).css({"right":"15px", "bottom": "112px"});
    })

    $(".upper-left").on('click',function () {
       // console.log('左上 督查汇总')
    })
    $(".lower-left").on('click',function () {
       // console.log('左下  督查汇总')
    })
    $(".upper-right").on('click',function () {
        //console.log('右上 督查汇总')
    })
    $(".lower-right").on('click',function () {
       // console.log('右下 督查汇总')
    })
   $(".ring>div").on('click',function () {
       //alert('123244')

   }) 
</script>
</body>
</html>